<template>
  <div class="layout">
    <div class="bg-wall" :style="bgStyle" aria-hidden="true"></div>
    <div class="bg-overlay" aria-hidden="true"></div>
    <NavBar />
    <main class="container">
      <router-view />
    </main>
    <SiteFooter />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import SiteFooter from '@/components/SiteFooter.vue';
import bgImage1 from '@/assets/teh1.jpg';
import bgImage2 from '@/assets/teh2.jpg';
import bgImage3 from '@/assets/jj1.jpg';

// 图片数组
const images = [bgImage1, bgImage2, bgImage3];
// 当前显示的图片索引
const currentIndex = ref(0);
// 背景样式
const bgStyle = ref({
  backgroundImage: `url(${images[currentIndex.value]})`,
  transition: 'background-image 1s ease-in-out'
});

let intervalId: number | null = null;

// 切换到下一张图片
const nextImage = () => {
  currentIndex.value = (currentIndex.value + 1) % images.length;
  bgStyle.value.backgroundImage = `url(${images[currentIndex.value]})`;
};

// 组件挂载时启动轮播
onMounted(() => {
  // 每5秒切换一次图片
  intervalId = window.setInterval(nextImage, 5000);
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<style scoped>
.layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--text);
  position: relative;
}
.container {
  width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 24px 0 40px;
}
/* 全站背景墙：从 src/assets 引入 */
.bg-wall {
  position: fixed;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
  filter: saturate(105%) contrast(95%);
  transition: background-image 1s ease-in-out;
}
/* 柔和遮罩，保证文字可读 */
.bg-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 20%, rgba(255,255,255,.80) 45%, rgba(255,255,255,.72) 70%, rgba(255,255,255,.66) 100%);
  pointer-events: none;
  z-index: 1;
}
:deep(header), :deep(main), :deep(footer) { position: relative; z-index: 2; }
</style>